<template>
    <div ref="chartRef" class="line-chart-container"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import * as echarts from 'echarts'
  
  const chartRef = ref(null)
  let chartInstance = null
  
  const getChartData = () => {
    return {
      days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      visits: [1200, 1800, 1500, 2200, 2500, 2100, 1900]
    }
  }
  
  const initChart = () => {
    const { days, visits } = getChartData()
    
    const option = {
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'axis',
        formatter: '{b}<br/>访问量: {c}',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: days,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#666',
          fontSize: 12,
          formatter: (value) => {
            return value / 1000 + 'k'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0'
          }
        }
      },
      series: [
        {
          name: '访问量',
          type: 'line',
          smooth: true,
          data: visits,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#409EFF'
          },
          lineStyle: {
            width: 3,
            color: '#409EFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(64, 158, 255, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(64, 158, 255, 0.1)'
              }
            ])
          }
        }
      ]
    }
  
    chartInstance.setOption(option)
  }
  
  onMounted(() => {
    chartInstance = echarts.init(chartRef.value)
    initChart()
    window.addEventListener('resize', resizeChart)
  })
  
  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
      chartInstance = null
    }
    window.removeEventListener('resize', resizeChart)
  })
  
  const resizeChart = () => {
    chartInstance?.resize()
  }
  
  defineExpose({
    resizeChart
  })
  </script>
  
  <style scoped>
  .line-chart-container {
    width: 100%;
    height: 100%;
    min-height: 250px;
  }
  </style>